<template>
  <div>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col v-permission="['super']" :span="4">
          <el-form-item label="组织">
            <el-select v-model="search.org_id" filterable>
              <el-option
                v-for="(item, index) in company"
                :key="index"
                :label="item.name"
                popper-class="w100"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="handleClick">查询终端</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="mt10">
      <el-button size="small" @click="handleOperationButton('Unbind')">
        解除绑定
      </el-button>
      <el-button size="small" @click="handleOperationButton('SetName')">
        设置名称
      </el-button>
      <el-button
        size="small"
        style="margin-left: 0;"
        @click="handleOperationButton('SetRemark')"
      >
        设置备注
      </el-button>
      <el-button size="small" @click="handleOperationButton('EnableMonitor')">
        启动监控
      </el-button>
      <el-button
        size="small"
        style="margin-left: 0;"
        @click="handleOperationButton('DisableMonitor')"
      >
        关闭监控
      </el-button>
      <el-button
        size="small"
        @click="handleOperationButton('EnableSelfprotect')"
      >
        启动主动防御
      </el-button>
      <el-button
        size="small"
        style="margin-left: 0;"
        @click="handleOperationButton('DisableSelfprotect')"
      >
        关闭主动防御
      </el-button>
      <el-button size="small" @click="handleOperationButton('StartNetContain')">
        网络隔离
      </el-button>
      <el-button
        size="small"
        style="margin-left: 0;"
        @click="handleOperationButton('StopNetContain')"
      >
        解除隔离
      </el-button>
    </div>
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="选择" width="60">
        <template slot-scope="scope">
          <el-radio
            v-model="tableSelect"
            :label="scope.row.id"
            style="margin-left: 10px;"
            @change="getTemplateRow(scope.row.id)"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="终端 ID" prop="id" sortable width="100" />
      <el-table-column label="终端名" prop="name" sortable />
      <el-table-column label="操作系统" prop="os_name" sortable />
      <el-table-column label="上一次接入时间" prop="access_time" sortable />
      <el-table-column label="绑定时间" prop="bind_time" sortable />
      <el-table-column label="主机名" prop="host_name" sortable />
      <el-table-column label="工作组/域名" prop="dns_name" sortable />
      <el-table-column label="在线状态">
        <template slot-scope="scope">
          <div
            :class="['is-status', scope.row.online ? 'success' : 'fail']"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="网络隔离">
        <template slot-scope="scope">
          <div
            :class="[
              'is-status',
              scope.row.net_containned ? 'success' : 'fail'
            ]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="监控">
        <template slot-scope="scope">
          <div
            :class="[
              'is-status',
              scope.row.monitor_enabled ? 'success' : 'fail'
            ]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="主动防御">
        <template slot-scope="scope">
          <div
            :class="[
              'is-status',
              scope.row.selfprotect_enabled ? 'success' : 'fail'
            ]"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="f12"
            type="text"
            @click="handleMoreInformation(scope.row)"
          >
            更多信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt10 el-row--flex is-justify-end">
      <el-pagination
        background
        :current-page="page"
        layout="total, prev, pager, next"
        :page-size="limit"
        :page-sizes="[100, 200, 300, 400]"
        small
        :total="count"
        @current-change="handleCurrentChangePage"
      />
    </div>
    <set-name ref="SetName" @change="loadingData" />
    <set-remark ref="SetRemark" @change="loadingData" />
    <el-drawer
      :before-close="handleClose"
      direction="rtl"
      title="详细信息"
      :visible.sync="visible"
    >
      <el-descriptions border :column="1">
        <el-descriptions-item
          v-for="(item, index) in Object.keys(moreInformation)"
          :key="index"
        >
          <template slot="label">
            {{ getName(item) }}
          </template>
          <div
            v-html="String(moreInformation[item]).replace(/\n/g, '<br/>')"
          ></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
import SetName from "@/views/endpoint/toast/setName";
import SetRemark from "@/views/endpoint/toast/setRemark";
import agent from "@/api/agent";
import org_getall from "@/utils/mixin/org_getall";
import radioTable from "@/utils/mixin/radioTable";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
import { mapGetters } from "vuex";
export default {
  name: "TerminalManage",
  components: { SetRemark, SetName },
  mixins: [org_getall, radioTable, checkSelectTable],
  data: () => {
    return {
      tableData: [],
      limit: 20,
      page: 1,
      count: 0,
      visible: false,
      search: {
        org_id: null
      },
      moreInformation: {}
    };
  },
  computed: mapGetters(["UserInfo"]),

  mounted() {
    this.init();
    if (this.UserInfo.org_id) this.search.org_id = this.UserInfo.org_id;
  },
  methods: {
    getName(key) {
      let keyDict = {
        id: "终端 ID",
        name: "终端名",
        comment: "备注",
        access_key: "终端接入码",
        agent_code: "终端识别码",
        agent_version: "客户端版本",
        net_containned: "网络隔离",
        domain_role: "系统角色",
        agent_ip: "客户端 IP",
        internal_ip: "内网 IP",
        physical_addr: "物理地址",
        bind_time: "绑定时间",
        monitor_enabled: "监控",
        selfprotect_enabled: "主动防御",
        access_time: "上一次接入时间",
        host_name: "主机名",
        dns_name: "工作组/域名",
        os_name: "操作系统",
        major_version: "主版本号",
        minor_version: "次版本号",
        build_version: "编译版本号",
        os_arch: "系统位数",
        boot_time: "上一次启动时间",
        online: "在线",
        has_bind: "绑定"
      };
      return keyDict[key] || key;
    },
    handleClose(done) {
      done();
    },
    handleMoreInformation(row) {
      this.$set(this, "moreInformation", row);
      this.visible = true;
    },
    handleOperationButton(module) {
      let data = {};
      this.is_check_table("id") &&
        (data = this.is_get_select_data()) &&
        this[`handle${module}`](data);
    },
    handleEnableMonitor({ id }) {
      agent
        .enable_monitor({
          agent_id: id
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingData();
        });
    },
    handleDisableMonitor({ id }) {
      this.$confirm(
        "关闭监控后，当前选中终端将不再上传遥感数据。您确定要关闭该终端的监控选项吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        return agent
          .disable_monitor({
            agent_id: id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.loadingData();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
      });
    },
    handleStartNetContain({ id }) {
      this.$confirm(
        "网络隔离后，当前选中终端的任何网络通信活动（除复杂之眼外）都将被阻止。您确定要将该终端进行网络隔离吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        return agent
          .start_netcontain({
            agent_id: id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.loadingData();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
      });
    },
    handleStopNetContain({ id }) {
      this.$confirm(
        "停止网络隔离后，当前选中终端将恢复正常的网络通信。您确定要停止该终端的网络隔离状态吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        return agent
          .stop_netcontain({
            agent_id: id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.loadingData();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
      });
    },

    handleEnableSelfprotect({ id }) {
      agent
        .enable_selfprotect({
          agent_id: id
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingData();
        });
    },
    handleDisableSelfprotect({ id }) {
      this.$confirm(
        "关闭主动防御后，当前选中终端将不再进行主动防御、客户端自我保护和威胁实时拦截。您确定要关闭该终端的主动防御选项吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        agent
          .disable_selfprotect({
            agent_id: id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.loadingData();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
      });
    },

    handleSetRemark({ id }) {
      this.$refs.SetRemark.show(id);
    },
    handleSetName({ id }) {
      this.$refs.SetName.show(id);
    },
    handleUnbind(data) {
      this.$confirm(
        "解除绑定后，您的组织将失去对当前选中终端的相关数据索引权限与客户端管理权限，届时，与该终端相关的威胁、检测和行为日志都不可查看。您确定要解除绑定吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        agent
          .unbind({
            agent_id: data.id
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.page = 1;
              this.loadingData();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
      });
    },
    async init() {
      await this.loadingOrgGetall();
      await this.loadingData();
    },
    loadingData() {
      return agent
        .list({
          org_id: this.search.org_id,
          limit: this.limit,
          page: this.page
        })
        .then(res => {
          this.count = res.data.count;
          this.tableData = res.data.bind_list;
        });
    },
    handleClick() {
      this.page = 1;
      this.loadingData();
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.loadingData();
    }
  }
};
</script>

<style lang="scss" scoped>
.is-status {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}

.success {
  background-color: $--color-success;
}

.fail {
  background-color: $--color-danger;
}
</style>
